<template>
  <v-page class="bg-light justify-around page-max">
    <view></view>
    <!-- logo -->
    <view class="logo fn-center">
      <img class="h-25" src="static/img/logo/login_logo.png" />
      <view class="color-tips fn-24">欢迎来到微聊</view>
    </view>
    <!-- form -->
    <view class="form p-x-20">
      <picker class="fn-xl m-b-sm m-l-md">
        中国(+86)
        <text class="iconfont fn-24 fn-middle">&#xe601;</text>
      </picker>
      <v-input
        placeholder="请输入手机号"
        class="bg-gray-2 p-x-md h-36 d-flex align-center fn-md rounded m-b-25"
      >
        <template #left>
          <view class="w-60 m-r-md fn-lg"> 手机号 </view>
        </template>
      </v-input>
      <v-input
        placeholder="请输入密码"
        class="bg-gray-2 p-x-md h-36 d-flex align-center fn-md rounded m-b-25"
        type="password"
      >
        <template #left>
          <view class="w-60 m-r-md fn-lg"> 密码 </view>
        </template>
      </v-input>
    </view>
    <!-- button-group -->
    <view class="btn-group">
      <v-button type="theme" class="btn m-b-25 rounded-lg">登录</v-button>
      <v-link class="b-block fn-md"> 验证码登录 </v-link>
    </view>
    <!-- link -->
    <view class="footer fn-center fn-md">
      <view class="link m-b-md">
        <v-link class="p-x-md border-r" to="/pages/forget/index"> 忘记密码 </v-link>
        <v-link class="p-x-md" to="/pages/reg/index"> 快速注册 </v-link>
      </view>
      <view class="color-tips">
        继续表示同意<v-link class="p-x-sm">微聊用户协议</v-link> 和
        <v-link class="p-x-sm">隐私政策</v-link>
      </view>
    </view>
  </v-page>
</template>
<script>
export default {};
</script>
<style lang="scss" scoped>
.page-max {
  height: 100vh;
}
.p-x-20 {
  padding-left: 40rpx;
  padding-right: 40rpx;
}
.m-b-25 {
  margin-bottom: 50rpx;
}
.btn-group {
  width: 500rpx;
  margin: 0 auto;
  .btn {
    height: 100rpx;
    &.rounded-lg:after {
      border-radius: $border-radius-lg * 2;
    }
  }
}
.footer {
  .link {
    line-height: 1.5;
  }
}
</style>